<template>
  <div class="myinfo">
          <div class="rtop">用户资料完善</div>
          <label  for="gupload" style="cursor:pointer"> 
          <div class="headimg">
            <img src="../../assets/head.svg"/>
            <div> 
               <input  type="file" lay-verify="title" id="gupload" accept="image/*" hidden class="aaa">
            </div>
          </div>
            </label>
          <div class="box">
            姓名
            <input type="text" id="mm" v-model="name">
          </div>
          <div class="box">
            邮箱    
            <input type="text" id="mm" v-model="email" @change="yx">
          </div>
          <div class="box">
            生日
       
            <input type="text" id="mm" v-model="birthday">
          </div>
          <div class="box myphone" >
            手机号码
            <div class="phone">
            <div class="shouji"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="44" height="44" viewBox="0 0 44 44"><clipPath id="master_svg0_0_329"><rect x="0" y="0" width="57" height="57" rx="0"/></clipPath><g clip-path="url(#master_svg0_0_329)" style="mix-blend-mode:passthrough"><g><g style="mix-blend-mode:passthrough"><path d="M42.625,22C42.625,33.3909,33.3909,42.625,22,42.625C10.60913,42.625,1.375,33.3909,1.375,22C1.375,10.60913,10.60913,1.375,22,1.375C33.3909,1.375,42.625,10.60913,42.625,22Z" fill="#F5F5F5" fill-opacity="1"/></g><g style="mix-blend-mode:passthrough"><path d="M30.25,22C30.25,26.5563,26.5563,30.25,22,30.25C17.443649999999998,30.25,13.75,26.5563,13.75,22C13.75,17.443649999999998,17.443649999999998,13.75,22,13.75C26.5563,13.75,30.25,17.443649999999998,30.25,22Z" fill="#ED4C5C" fill-opacity="1"/></g></g></g></svg></div>
            <input type="text" id="mm" v-model="phone" @change="shouji">
            </div>

          </div>
          <div class="box">
            性别
     
            <select name="" id="" v-model="sex">
               <option value="0">--请选择性别--</option>
              <option value="1">男</option>
               <option value="1">女</option>
            </select>
          </div> 

    <div class="login2" @click="yz">提交</div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
           name:'MyInfo',
           data(){
            return{
              name:'',
              email:'',
              birthday:'',
              phone:'',
              sex:'',
              youxiang:false,
              iphone:false
            }
           },
           mounted(){
                  this.xsyx()
           },
           methods:{
            //显示头像
            xsyx(){
              document.querySelector(".aaa").onchange=function(){
              let fr = new FileReader();
               fr.readAsDataURL(this.files[0])
              fr.onload=function(){
               document.querySelector(`img`).src=this.result;
       }  
       }
              },
              //验证姓名
            yz(){
              if(this.name!=''&&this.email!=''&&this.birthday!=''&&this.phone!=''&&this.sex!=''&&this.youxiang==this.iphone==true){
               
                axios({
                  method:"post",
                  url:'/login',
                  data:{
                    email:this.email,
                    password:md5(Math.random()*10)
                  }
                }).then((res)=>{
                  console.log(res.data)
                })
                this.$router.push('/index')
              }else{
                       ElMessage({
                       message: '请确认信息填写完整且正确',
                       type: 'warning',
                         })
              }
            },//验证邮箱时
            yx(){
            let emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
             let add=this.email
             if(!emailReg.test(add)){
                 ElMessage({
                message: '邮箱格式错误，请重新输入邮箱',
                 type: 'warning',
              })
               }else{
                  this.youxiang=true
               } 
          },
          //验证手机
            shouji(){
            let emailReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
             let add=this.phone
             if(!emailReg.test(add)){
             
                 ElMessage({
                message: '手机格式错误，请重新输入手机',
                 type: 'warning',
              })
               } else{
                this.iphone=true
               }
          },

            }
}
</script>